<template>
  <div>
    <div class="topDiv">
      <el-row>
        <el-col :span="18">
          <el-col :span="6">
            <span style="margin-left:20px">事件编号：</span>
            <span>00001</span>
          </el-col>
          <el-col :span="6">
            <span>上报时间：</span>
            <span>2022-01-01</span>
          </el-col>
          <el-col :span="6">
            <span>上报卡状态：</span>
            <span>正常</span>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini">暂存（不验证）</el-button>
          <el-button type="primary" size="mini">保存</el-button>
        </el-col>
      </el-row>
    </div>
    <el-card class="box-card" style="margin-top:60px">
      <div slot="header" class="clearfix">
        <span class="title-text"
          ><i class="el-icon-document-remove"></i>患者基本信息</span
        >
      </div>
      <div class="text item">
        <div>
          <el-row>
            <el-col :span="4">
              <div class="ipt-text red">就诊类型：</div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-radio v-model="sex" label="1">急诊</el-radio>
                <el-radio v-model="sex" label="2">门诊</el-radio>
                <el-radio v-model="sex" label="3">住院</el-radio>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="ipt-text red">门诊号/病例号：</div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-input
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                ></el-input>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">
              <div class="ipt-text red">姓名：</div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-input
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                ></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="ipt-text red">性别：</div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-radio v-model="sex" label="1">男</el-radio>
                <el-radio v-model="sex" label="2">女</el-radio>
                <el-radio v-model="sex" label="3">不详</el-radio>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">
              <div class="ipt-text red">出生日期：</div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-date-picker
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                ></el-date-picker>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="ipt-text ">民族：</div>
            </el-col>
            <el-col :span="4">
              <div>
                <el-radio v-model="sex" label="1">汉</el-radio>
                <el-radio v-model="sex" label="2">其他民族</el-radio>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">
              <div class="ipt-text ">户籍：</div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-input
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                  style="width:60px"
                ></el-input
                >省
                <el-input
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                  style="width:60px"
                ></el-input
                >市（地）
                <el-input
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                  style="width:60px"
                ></el-input
                >（市/区）
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">
              <div class="ipt-text ">现居住地：</div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-input
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                  style="width:60px"
                ></el-input
                >省
                <el-input
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                  style="width:60px"
                ></el-input
                >市（地）
                <el-input
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                  style="width:60px"
                ></el-input
                >（市/区）
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">
              <div class="ipt-text">婚姻状况：</div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-radio v-model="sex" label="1">未婚</el-radio>
                <el-radio v-model="sex" label="2">未婚同居</el-radio>
                <el-radio v-model="sex" label="3">已婚/再婚</el-radio>
                <el-radio v-model="sex" label="4">离婚</el-radio>
                <el-radio v-model="sex" label="5">丧偶</el-radio>
                <el-radio v-model="sex" label="6">其他</el-radio>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <div class="ipt-text">从业：</div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-radio-group
                  v-model="sex"
                  v-for="(item, index) in radioList"
                  :key="index"
                >
                  <el-radio :label="item.id" style="margin-left:10px;">{{
                    item.name
                  }}</el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
           <el-row>
            <el-col :span="4">
              <div class="ipt-text">文化程度：</div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-radio-group
                  v-model="sex"
                  v-for="(item, index) in radioList1"
                  :key="index"
                >
                  <el-radio :label="item.id" style="margin-left:10px;">{{
                    item.name
                  }}</el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <div class="ipt-text ">原患疾病：</div>
            </el-col>
            <el-col :span="18">
              <div>
                <el-input
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                  style="width:300px"
                ></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <div class="ipt-text">本次临床诊断：</div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-checkbox-group v-model="sex">
                  <el-checkbox label="1" style="margin-left:10px;"
                    >药物滥用（有害使用）：在1年内使用精神活性物资，产生损害或不良后果</el-checkbox
                  >
                   <el-checkbox label="2" style="margin-left:10px;"
                    >药物依赖：在1年内使用精神活性物资出现渴求、失控、戒断、耐受症状（符合三种症状）并导致损害者</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title-text"
          ><i class="el-icon-document-remove"></i>怀疑药品/物资及使用情况</span
        >
      </div>
      <div class="text item">
        <div class="ipt-area">
          <div class="ipt-text " style="margin-bottom:10px;">
            ● 如果题14的“给药途径”选择“肌内/皮下/静脉/动脉注射”，请回答是否与他人共用过注射器：
          </div>
         <el-radio v-model="sex" label="1">是</el-radio>
         <el-radio v-model="sex" label="2">否</el-radio>
        </div>
         <div class="ipt-area" >
          <div class="ipt-text " style="margin-bottom:10px;">
            ● 用药的主要场所：
          </div>
         <el-checkbox-group
            v-model="sex"
            v-for="(item, index) in radioList2"
            :key="index"
          >
            <el-checkbox :label="item.id" style="margin-left:10px;float:left">{{
              item.name
            }}</el-checkbox>
          </el-checkbox-group>
        </div>
         <div class="ipt-area" style="margin-top:40px">
          <div class="ipt-text " style="margin-bottom:10px;">
            ● 用药情况简述：
          </div>
         <el-input
            type="textarea"
            placeholder="请输入用药情况简述："
            v-model="form.user"
            maxlength="2000"
            show-word-limit
            style="width:80%;"
          />
        </div>
        <div class="ipt-area">
          <div class="ipt-text " style="margin-bottom:10px;">
            ● 用药导致结果（躯体检查、精神状况检查及实验室检查请假）：
          </div>
         <el-input
            type="textarea"
            placeholder="请输入用药导致结果（躯体检查、精神状况检查及实验室检查请假）："
            v-model="form.user"
            maxlength="2000"
            show-word-limit
            style="width:80%;"
          />
        </div>
          <div class="ipt-area">
          <div class="ipt-text " style="margin-bottom:10px;">
            ● 处理情况及结果：
          </div>
         <el-input
            type="textarea"
            placeholder="请输入处理情况及结果："
            v-model="form.user"
            maxlength="2000"
            show-word-limit
            style="width:80%;"
          />
        </div>
      </div>
    </el-card>
  <el-card class="box-card" style="padding-bottom:80px">
      <div slot="header" class="clearfix">
        <span class="title-text"
          ><i class="el-icon-document-remove"></i>报告人信息</span
        >
      </div>
      <div class="text item">
        <el-row>
          <el-col :span="4">
            <div class="ipt-text ">● 报告人：</div>
          </el-col>
          <el-col :span="10">
            <div>
             <el-input
                v-model="form.user"
                size="mini"
                class="card-ipt"
              ></el-input>
            </div>
          </el-col>
            <el-col :span="4">
            <div class="ipt-text ">● 报告科室：</div>
          </el-col>
          <el-col :span="6">
            <div>
             <el-input
                v-model="form.user"
                size="mini"
                class="card-ipt"
              ></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="ipt-text">● 报告单位：</div>
          </el-col>
          <el-col :span="10">
            <div>
              <el-input
                v-model="form.user"
                size="mini"
                class="card-ipt"
              ></el-input>
            </div>
          </el-col>
           <el-col :span="4">
            <div class="ipt-text">● 联系人：</div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-input
                v-model="form.user"
                size="mini"
                class="card-ipt"
              ></el-input>
            </div>
          </el-col>
        </el-row>
         <el-row>
          <el-col :span="4">
            <div class="ipt-text">● 填表日期：</div>
          </el-col>
          <el-col :span="10">
            <div>
             <el-date-picker
                  v-model="form.user"
                  size="mini"
                  class="card-ipt"
                ></el-date-picker>
            </div>
          </el-col>
        
        </el-row>
      </div>
    </el-card>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio1: "住院",
      input: "",
      form: {},
      sex: 1,

      radioList: [
        { id: 1, name: "无业" },
        { id: 2, name: "服务业人员" },
        { id: 3, name: "个体经营" },
        { id: 4, name: "娱乐场所" },
        { id: 5, name: "演艺" },
        { id: 6, name: "交通运输" },
        { id: 7, name: "公务员" },
        { id: 8, name: "自由职业" },
        { id: 9, name: "农民" },
        { id: 10, name: "外出务工" },
        { id: 11, name: "在校学生" },
        { id: 12, name: "外资/合资" },
        { id: 13, name: "企事业职工/工人" },
        { id: 14, name: "其他" },
      ],
      radioList1: [
        { id: 1, name: "文盲" },
        { id: 2, name: "小学" },
        { id: 3, name: "初中" },
        { id: 4, name: "高中/中专" },
        { id: 5, name: "大学/大专" },
      ],
      radioList2: [
        { id: 1, name: "居家住所" },
        { id: 2, name: "朋友处" },
        { id: 3, name: "暂住地/出租屋" },
        { id: 4, name: "宾馆" },
        { id: 5, name: "夜总会/KTV歌厅" },
        { id: 6, name: "网吧/游艺厅" },
        { id: 7, name: "洗浴中心/美容院" },
        { id: 8, name: "无固定地点" },
        { id: 9, name: "其他场所" },
      ],
    };
  },
};
</script>
<style scoped>
.topDiv {
  height: 60px;
  width: 100%;
  line-height: 60px;
  position: fixed;
  top:0px;
  z-index: 999;
  background: #e8f2fe;
}
.title-text {
  color: #1e8bc2;
  font-weight: bold;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.el-card /deep/ .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 20px;
}
.card-ipt {
  width: 200px;
}
.red {
  font-weight: 600;
  color: #ff0000;
}
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.ipt-area {
  margin-top: 20px;
}
.mt20 {
  margin-top: 20px;
}
.border {
  border-bottom: 1px solid #ccc;
}
</style>
